<template> 
 <div class="v-simple-cropper"> 
 <!-- <slot> 
  <button @click="upload">上传图片</button> 
 </slot>  -->
 <input class="file" ref="file" type="file" accept="image/*" @change="uploadChange"> 
 <div class="v-cropper-layer" ref="layer"> 
  <div class="layer-header"> 
  <button class="cancel" @click="cancelHandle">取消</button> 
  <button class="confirm" @click="confirmHandle">确定</button> 
  </div> 
  <img ref="cropperImg"> 
 </div> 
 </div> 
</template> 
  
<script> 
import Cropper from 'cropperjs' 
import 'cropperjs/dist/cropper.min.css' 
export default { 
 name: 'v-simple-cropper', 
 props: { 
 initParam: Object, 
 successCallback: { 
  type: Function, 
  default: () => {} 
 } 
 }, 
 data () { 
 return { 
  cropper: {}, 
  filename: '' 
 } 
 }, 
 mounted () { 
 this.init() 
 }, 
 methods: { 
 // 初始化裁剪插件 
 init () { 
  let cropperImg = this.$refs['cropperImg'] 
  this.cropper = new Cropper(cropperImg, { 
  aspectRatio: 1 / 1, 
  dragMode: 'move' 
  }) 
 }, 
 // 从base64转化为file文件
    base64ToFile(base64Str, fileName) {
      const params = base64Str.split(',')
      const mime = params[0].match(/:(.*?)/)[1]
      const fileData = atob(params[1]) // 解码Base64
      let { length } = fileData
      const uint8Array = new Uint8Array(length)
      while (length) {
        length -= 1
        uint8Array[length] = fileData.charCodeAt(length)
      }
      return new File([uint8Array], fileName, { type: mime })
    },
    modifyoriphoto(neworifile)
    {
 //base
   this.imgSrc=neworifile;
   console.log('imgsrc修改完成')

    },
    toshipin(){
              this.$router.push({  
             path:'/files/shipinlist',   
      })

    },
        tozuopin(){
              this.$router.push({  
        path:'/files/zuopin',   
      })

    },
            toorder(){
              this.$router.push({  
               path:'/order/order',   
      })

    },
 // 点击上传按钮 
 upload () { 

  this.$refs['file'].click() 
  
 }, 
 // 选择上传文件 
 uploadChange (e) { 
  //  console.log("+++++++++开始upload22222222222222");
  console.log("+++++++++++++++++++++"+e)
  let file = e.file
  this.filename = file['name'] 
  let URL = window.URL || window.webkitURL 
  this.$refs['layer'].style.display = 'block' 
  this.cropper.replace(URL.createObjectURL(file)) 
 }, 
 // 取消上传 
 cancelHandle () { 
  this.cropper.reset() 
  this.$refs['layer'].style.display = 'none' 
  this.$refs['file'].value = '' 
 }, 
 // 确定上传 
 confirmHandle () { 
   this.$loadingshow();
  let cropBox = this.cropper.getCropBoxData() 
  let scale = this.initParam['scale'] || 1 
  let cropCanvas = this.cropper.getCroppedCanvas({ 
  width: cropBox.width * scale, 
  height: cropBox.height * scale 
  }) 
  console.log("---------------确定开始");
  let imgData = cropCanvas.toDataURL('image/png') 
    console.log(imgData);

 this.$emit('successCallback', this.base64ToFile(imgData, 'avatar.png'));
   console.log("---------------确定结束");
//   let formData = new window.FormData() 
//   formData.append('fileType', this.initParam['fileType']) 
//   formData.append('img', imgData) 
//   formData.append('signId', this.$localStorage('signId')) 
//   formData.append('originalFilename', this.filename) 
//   window.$axios(this.initParam['uploadURL'], formData, { 
//   method: 'post', 
//   headers: {'Content-Type': 'multipart/form-data'} 
//   }).then(res => { 
//   this.successCallback(res.data) 
//   this.cancelHandle() 
//   }) 
//  } 
 } 
 }
} 
</script> 
  
<style lang="less"> 
.v-simple-cropper { 
 .file { 
 display: none; 
 } 
 .v-cropper-layer { 
 position: fixed; 
 top: 0; 
 bottom: 0; 
 left: 0; 
 right: 0; 
 background: #fff; 
 z-index: 99999; 
 display: none; 
 .layer-header { 
  position: absolute; 
    font-size: 1rem; 
    color: cornflowerblue;
  bottom: 0; 
  left: 0; 
  z-index: 99999; 
  background: #fff; 
  width: 100%; 
  height: 2.5rem; 
  padding: 0.2rem; 
  box-sizing: border-box; 
 } 
 .cancel, 
 .confirm { 
  line-height: 2rem; 
  width: 50%;
  background: inherit; 
  border: 0; 
  outline: 0; 
  float: left; 
 } 
 .confirm { 
  float: right; 
 } 
 img { 
  position: inherit!important; 
  border-radius: inherit!important; 
  float: inherit!important; 
 } 
 } 
} 
</style> 